<!DOCTYPE html>
<html>

<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta charset="utf-8">
    <meta name="renderer" content=webkit>
    <!-- 引入vue -->
    <script src="../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../js/jQyery.js"></script>
    <script src="../js/layer/layer.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/element/element.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../js/element/element.css">
    <link rel="stylesheet" href="../css/maincontent.css">



</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <div class="farmindex_main" id="app" v-cloak>
        <div class="nofarm" v-if="farmlist.length==0">
            <div class="nofarm">
                <div class="nofarmdiv"><span>Welcome to the experience</span> <span class="orangespan">FARMNET</span>
                    <span>Wisdom farm</span></div>
                <div class="nofarmdiv"><span>Click on the lower side</span> <span class="bluespan">[Add the farm]</span>
                </div>
                <div class="nofarmdiv"><span>Connect smart devices</span></div>
                <div class="nofarmdiv"><span>Build the farm of the future</span></div>
                <div class="addfarm"><span>Add the farm</span></div>
            <!-- </div>
            <div class="nofarmdiv">
                <span>欢迎体验</span>
                <span class="orangespan">FARMNET</span>
                <span>智慧农场</span>
            </div>
            <div class="nofarmdiv">
                <span>点击下侧</span>
                <span class="bluespan">[添加农场]</span>

            </div>
            <div class="nofarmdiv">
                <span>连接智能设备</span>


            </div>
            <div class="nofarmdiv">
                <span>智造未来农场</span>


            </div>
            <div class="addfarm">
                <span>添加农场</span>
            </div> -->
        </div>
        <div class="farmlist" v-if="farmlist.length>0">
            <template v-for="item in farmlist">


                <div class="farmdiv">
                    <div class="farmdiv_title">
                        <div class="ft_left">
                            <div class="ft_lefttop">
                                <span>{{item.farmname}}</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                            <div class="ft_leftdesc">
                                <span>{{item.farmdesc}}</span>
                            </div>
                        </div>
                        <div class="ft_right" v-on:click.stop="showmenudialog(item)">
                            <img src="../img/gd.png">
                        </div>
                        <div class="titlemenu" v-if="item.showmenu">
                            <div class="menudiv">
                                <span>添加设备</span>
                            </div>
                            <div class="menudiv">
                                <span>管理成员</span>
                            </div>
                            <div class="menudiv">
                                <span>更改名称</span>
                            </div>
                            <div class="menudiv">
                                <span>农场详情</span>
                            </div>
                        </div>

                    </div>
                    <div class="farmchildlist" v-if="item.children.length>0">
                        <template v-for="itemjson in item.children">
                            <div class="fcl_div">
                                <div class="child_img">
                                    <img :src="itemjson.img">
                                </div>
                                <div class="child_name">
                                    <span>{{itemjson.name}}</span>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="farmchildlist" v-if="item.children.length>0">
                        <div class="fcl_div">
                            <div class="child_img">
                                <img src="../img/ckgd.png">
                            </div>
                            <div class="child_name">
                                <span>查看更多</span>
                            </div>
                        </div>
                        <div class="fcl_div">
                            <div class="child_img">
                                <img src="../img/tianjia.png">
                            </div>
                            <div class="child_name">
                                <span>添加</span>
                            </div>
                        </div>

                    </div>
                    <div class="nochild" v-if="item.children.length==0">
                        <div class="listaddchild">
                            <img src="../img/tianjia.png">
                        </div>
                        <div class="addchilddesc">
                            <span>添加温室/地块/鱼池/其它</span>
                        </div>
                    </div>
                </div>
            </template>

            <div class="farmdiv listaddfarm">

                <div class="addfarmdiv">
                    <img src="../img/tjnc.png">
                </div>
                <div class="addfarmdesc">
                    <img src="../img/jia.png">
                    <span>添加农场</span>
                </div>


            </div>
        </div>


    </div>
</body>

</html>
<script>
    var loginvue = new Vue({
        el: '#app',
        data() {
            return {
                farmlist: [
                    
                ],
                


            }
        },
        computed: {

        },
        created() {

        },
        mounted() {



        },
        methods: {
            showmenudialog(item) {
                this.farmlist.map(res => {
                    res.showmenu = false;
                })
                item.showmenu = true;
                let _this = this;
                $(document).on("click", function () {
                    _this.farmlist.map(res => {
                        res.showmenu = false;
                    })
                })
            }
        }
    })
</script>